<template>
	<!--  修改对话框 -->
	<el-dialog v-model="editVisible" title="修改密码" width="60%" draggable>
	  <el-form :model="form" label-width="80px" :rules="formRules"  class="demo-ruleForm">
	      <el-form-item label="原密码">
	        <el-input v-model="form.oldPassword" />
	      </el-form-item>
		  <el-form-item label="新密码">
		    <el-input v-model="form.newPassword" />
		  </el-form-item>
		  <el-form-item label="确认密码">
		    <el-input v-model="form.conformPassword" />
		  </el-form-item>
	   </el-form>
	  <template #footer>
	    <span class="dialog-footer">
	      <el-button @click="editVisible = false">取消</el-button>
	      <el-button type="primary" @click="updatePassword">修改</el-button>
	    </span>
	  </template>
	</el-dialog>  
	
  <div class="common-layout" style="height:100%;">
    <el-container  style="height:100%">
		<!--导航栏-->
      <el-aside style="background-color:#669966;height:700px;margin-right:10px;margin-left:-8px;
	  margin-top:-10px;2px solid #669966;border-radius:5px; box-shadow: 5px 5px 15px #909399;" :width="isCollapse ? '64px' : '200px' "> <!--根据布尔值的改变使得宽度发生改变-->
	        <el-menu
	            active-text-color="#FFA500"
	            background-color= "#669966"
				class="el-menu-vertical-demo"
				:collapse="isCollapse"
				:router="true"
				text-color="#fff"
				style="border-right-width: 0;"
	        > 
	          <el-sub-menu index="1"><!-- index指向路由path值 -->
	            <template #title>
					<!--图标取element+的图表库中找-->
	              <el-icon><location /></el-icon>
	              <span>基本配置</span>
	            </template>
				<el-menu-item index="myself">
					<el-icon><setting /></el-icon>
					<span>个人信息管理</span>
				</el-menu-item>
				<el-menu-item index="hall">
					<el-icon><setting /></el-icon>
					<span>活动大厅</span>
				</el-menu-item>
	          </el-sub-menu>

			  <el-sub-menu index="2">
			    <template #title>
			      <el-icon><location /></el-icon>
			      <span>动态菜单</span>
			    </template>
				<el-menu-item
					v-for="(menu, index) in menu_data"
					:index="menu.router"
				>
				<!-- <component :is="item.menu_icon"" style="width: 20px; height:20px;"/> -->
				<span>{{menu.resource_description}}</span>
				</el-menu-item>
			  </el-sub-menu>
			  
	        </el-menu>	  
	  </el-aside>
      <el-container style="width:100%">
		<!--header区-->
        <el-header style="background-color: #669966; text-align: left;margin-top:-10px ;border-radius:35px;box-shadow: 5px 5px 5px #909399;" >			
			 <div id="" style="width:160px; margin-top:10px; float:right;">
				 <el-dropdown>
					<el-icon size="30px" color="#fff"><Avatar /></el-icon>					
					<template #dropdown>
					  <el-dropdown-menu>
						<el-dropdown-item @click.native="loginOut">注销</el-dropdown-item>
						<el-dropdown-item @click.native="initEdit">修改密码</el-dropdown-item>
					  </el-dropdown-menu>
					</template>
				  </el-dropdown>
				  <span class='user'>{{username}}</span>
			 </div>
			 <el-icon color="#fff" size="20px" @click="isCollapse=!isCollapse" style="padding-top:10px;">
			 	<component :is="isCollapse?'DArrowRight':'DArrowLeft'" />
			 </el-icon>
			 <h1 style="color: #fff; width:300px; display:inline-block; margin-left:30px; ">校园志愿者服务系统</h1>
			 
		</el-header>
		<!--主要内容-->
        <el-main>
			<router-view></router-view>
		</el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
	import { ref,getCurrentInstance} from 'vue'
	// 按需引入 vue-router
	import {useRouter} from 'vue-router'	
	// 路由实例化
	const router = useRouter();
	//左边栏是否收起
	const isCollapse = ref(false) 
	//对话框可见性
	let editVisible = ref(false)
	//用于右上角名称显示
	let username=ref() 
	username.value=window.sessionStorage.getItem('loginUser')
	
	let { proxy } = getCurrentInstance();
	//表单对象
	let form=ref({})
	
	let user=ref({})

	//退出登录
	function loginOut(){
		router.push('/')
	}
	
	//修改对话框显示出来，数据初始化
	function initEdit(){
		form.value={}
		editVisible.value = true
	}
	
	function updatePassword(){
		if(form.value.newPassword != form.value.conformPassword){
			alert("两次密码输入不一致")
		}else if(form.value.newPassword=='' && form.value.conformPassword==''){
			alert("密码不可为空")
		}else if(form.value.oldPassword != window.sessionStorage.getItem('password')){
			alert("原密码错误")
		}else if(form.value.oldPassword==form.value.newPassword){
			alert("新密码不可与原密码一致")
		}else if(form.value.newPassword == form.value.conformPassword){
			user.value.id = window.sessionStorage.getItem('userId')
			user.value.password = form.value.newPassword
			proxy.$http.put(
			'/userUpdatePassword',
			user.value,
			{"headers":{"token":window.sessionStorage.getItem("token")}},
			)  ////按修改数据的接口组织url
			.then(res => {								
				editVisible.value = false	//关闭对话框		
				form.value={}  //清空修改对象
				alert(res.data.message)	
				loginOut()
			})
		}
	}
	
	let menu_data=ref([])//恢复为菜单数组，用于动态菜单
	menu_data.value=JSON.parse(sessionStorage.getItem("menu_data"))
	//console.log(menu_data.value)

</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 700px;
}
.user{
	font-size:20px;
	display: inline-block;
	line-height:40px;color:#fff;
}
</style>
